<template>
	<view class="main" v-if="Introductionlistshow">
		<view class="top">
			<view class="top_left">
				<view class="image">
					<image :src="Introductionlist.cover_url" mode=""></image>
				</view>
			</view>
			<view class="top_center">
				<view class="title">
					{{Introductionlist.name?Introductionlist.name:'书名'}}
				</view>
				<view class="liulan">
					{{all_read?all_read:0}}浏览
				</view>
				<view class="tabs">
					<text class="tab" v-for="(v,k) in keyword" :key="k">
						{{v}}
					</text>
				</view>
			</view>
			<view class="top_right">
				<view class="share">
					<image src="@/static/sharemoney.svg" mode="" @click="sharecommand"></image>
				</view>
			</view>
		</view>
		<view class="Bookintroduction">
			<view class="title">
				内容试读
			</view>
			<view class="content">
				<view class="neirong">
					{{content}}
				</view>
			</view>
			<view id="copyText" class="fuzhi" @click="fuzhi">【点击复制】</view>
		</view>
		<view class="tuijian">
			<view class="like_title">
				猜你喜欢
			</view>
			<view class="box" v-for="(v,k) in xiangsilist" :key="k" @click="goIntroduction(v)">
				<view class="box_img">
					<image :src="v.cover_url" mode="widthFix"></image>
				</view>
				<view class="content">
					<view class="shang">
						<view class="shang_content">
							{{v.name}}
						</view>
					</view>
					<view class="zhong">
						<view class="zhong_content">
							{{v.intro}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="footer_">
				<view class="footer_left" @click="addbookstore">
					<view class="footer_left_top">
						<image src="@/static/shujia.svg" mode="" v-if="Introductionlist.in_user_case == 2"></image>
						<image src="@/static/icon/bookshelf.svg" mode="" v-if="Introductionlist.in_user_case == 1">
						</image>
					</view>
					<view class="footer_left_xia" v-if="Introductionlist.in_user_case == 1">
						已在书架
					</view>
					<view class="footer_left_xia" v-if="Introductionlist.in_user_case == 2">
						加入书架
					</view>
				</view>
				<view class="footer_right">
					<view class="yuedu" @click="godetail">
						阅读全文
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {
		Books
	} from "@/request/api.js"
	export default {
		data() {
			return {
				id: '',
				category_id: '',
				Introductionlistshow: false,
				Introductionlist: [],
				keyword: '',
				xiangsilist: [],
				search_keyword_id: '',
				all_read: '',
				content: '',
			};
		},
		onLoad(option) {
			this.id = option.id
			if (option.hasOwnProperty('search_keyword_id')) {
				this.search_keyword_id = option.search_keyword_id
			} else {
				this.search_keyword_id = 0
			}
			this.Introduction()
		},
		methods: {
			
			fuzhi() {
				uni.setClipboardData({
					data: this.content,
					showToast: false,
					success: () => {
						uni.showToast({
							title: "复制成功",
							icon: 'none'
						})
					}
				});
			},
			sharecommand() {
				Books.sharemoney(this.id)
			},
			// 加入书架
			async addbookstore() {
				if (this.Introductionlist.in_user_case == 2) {
					this.Introductionlist.in_user_case = 1
					let res = await Books.Addbooks(this.id)
					if (res.status_code != 200) {
						this.Introductionlist.in_user_case = 2
						uni.showToast({
							title: res.error_user_msg,
							icon: "none",
							duration: 2000
						})
					} else {
						this.Introductionlist.in_user_case = 1
					}
				}

			},
			// 简介书籍详情
			async Introduction() {
				let res = await Books.detail(this.id)
				this.Introductionlist = res.data
				this.Introductionlistshow = true
				uni.setNavigationBarTitle({
					title: res.data.name,
				});
				this.all_read = res.data.book_extension.all_read
				this.category_id = res.data.category_id
				this.keyword = res.data.keyword.split(',').slice(0, 3).filter(k => k.trim())
				this.content = res.data.trial_read_content.replace(/<p[^>]*>|<\/p>/g, "").replace(/<br>/g, '')
				this.xiangsi()
			},
			// 相似推荐
			async xiangsi() {
				let res = await Books.Xiangsi(this.id, this.category_id)
				this.xiangsilist = res.data
			},
			godetail() {
				uni.navigateTo({
					//原来的
				url: `/pages/novel_plugin/index?id=${this.id}&chapter_id=${this.Introductionlist.chapter_id}&search_keyword_id=${this.search_keyword_id}`
				//测试阅读器
				// url: `/pages/novel_plugin/index?id=r7463373585889888552&search_keyword_id=${this.search_keyword_id}`
				

				})
			},
			// 去简介详情页面
			goIntroduction(v) {
				uni.redirectTo({
					url: `/pages/Introduction/Introduction?id=${v.id}`
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	@import url("./Introduction.less");
</style>